<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>学生管理·添加学生</title>
    <link rel="stylesheet" type="text/css" href="/static/css/page/add.css">
</head>
<body>
<form action="" method="post" id="popups-window">
    <table>
        <tbody>
        <tr>
            <td>
                <span class="label">姓名</span>
            </td>
            <td>
                <label>
                    <input class="input name" name="name" type="text" minlength="1" maxlength="8"
                           autocomplete="off" placeholder="1~8位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">账号</span>
            </td>
            <td>
                <label>
                    <input class="input account" name="account" type="text" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">密码</span>
            </td>
            <td>
                <label>
                    <input class="input password" name="password" type="password" minlength="1" maxlength="32"
                           autocomplete="off" placeholder="1~32位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">性别</span>
            </td>
            <td>
                <label>
                    <select class="input gender" name="gender" required>
                        <option value="">-请选择性别-</option>
                        <option value="true">男</option>
                        <option value="false">女</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">手机</span>
            </td>
            <td>
                <label>
                    <input class="input phone" name="phone" type="tel" minlength="11" maxlength="11"
                           autocomplete="off" placeholder="11位数字" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">邮箱</span>
            </td>
            <td>
                <label>
                    <input class="input email" name="email" type="email" minlength="1" maxlength="32"
                           autocomplete="off" placeholder="1~32位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">QQ号</span>
            </td>
            <td>
                <label>
                    <input class="input qq" name="qq" type="number" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位数字" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">钉钉</span>
            </td>
            <td>
                <label>
                    <input class="input dingding" name="dingding" type="text" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位字符" required>
                </label>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="button-box">
        <button class="button confirm" type="submit">确定</button>
        <button class="button cancel" type="submit">取消</button>
    </div>
</form>

<script type="application/javascript">
    $(function () {
        // 获取组件
        let nameEle = $('#popups-window input[name="name"]');
        let accountEle = $('#popups-window input[name="account"]');
        let passwordEle = $('#popups-window input[name="password"]');
        let genderEle = $('#popups-window select[name="gender"]');
        let phoneEle = $('#popups-window input[name="phone"]');
        let emailEle = $('#popups-window input[name="email"]');
        let qqEle = $('#popups-window input[name="qq"]');
        let dingdingEle = $('#popups-window input[name="dingding"]');

        // 监听关闭按钮
        $('#popups-window > .button-box > .button.cancel').click(function (e) {
            e.preventDefault();
            $('#popups-window').hide(300, 'swing', function () {
                window.location.reload();
            });
        });

        // 监听表单提交
        $('#popups-window').submit(function () {
            // 获取数据
            let name = nameEle.val();
            let account = accountEle.val();
            let password = passwordEle.val();
            let gender = genderEle.val();
            let phone = phoneEle.val();
            let email = emailEle.val();
            let qq = qqEle.val();
            let dingding = dingdingEle.val();

            // 数据提交
            $('#popups-window').html(`<h2 style="margin-left: 20px; margin-right: 20px;">数据提交中...</h2>`);
            $.ajax({
                url: '/api/user/add',
                type: "POST",
                data: {
                    'userRoleId': 6,
                    'userInfo.name': name,
                    'account': account,
                    'password': password,
                    'userInfo.gender': gender,
                    'userInfo.phone': phone,
                    'userInfo.email': email,
                    'userInfo.qq': qq,
                    'userInfo.dingding': dingding,
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        $.message({
                                type: 'success', content: res.msg, onClose: function () {
                                    window.location.reload();
                                }
                            }
                        );
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });

            return false;
        });
    });
</script>
</body>
</html>